<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        td {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            cursor: pointer;
        }

        #message {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>五子棋游戏</h1>
    <table id="board">
        <?php
        session_start();
        if (!isset($_SESSION['board'])) {
            $_SESSION['board'] = array_fill(0, 15, array_fill(0, 15, 0));
        }
        $board = $_SESSION['board'];

        for ($i = 0; $i < 15; $i++) {
            echo '<tr>';
            for ($j = 0; $j < 15; $j++) {
                echo '<td data-row="' . $i . '" data-col="' . $j . '"></td>';
            }
            echo '</tr>';
        }
        ?>
    </table>
    <div id="message"></div>
    <script>
        const board = document.getElementById('board');
        const messageDiv = document.getElementById('message');
        let currentPlayer = 1;

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD' && event.target.style.backgroundColor === '') {
                const row = event.target.dataset.row;
                const col = event.target.dataset.col;

                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'play.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            event.target.style.backgroundColor = currentPlayer === 1 ? 'black' : 'white';
                            if (response.winner) {
                                messageDiv.textContent = `玩家 ${response.winner} 获胜！`;
                                disableBoard();
                            } else if (response.draw) {
                                messageDiv.textContent = '平局！';
                                disableBoard();
                            } else {
                                currentPlayer = 3 - currentPlayer;
                                messageDiv.textContent = `轮到玩家 ${currentPlayer} 落子`;
                            }
                        }
                    }
                };
                xhr.send(`row=${row}&col=${col}&player=${currentPlayer}`);
            }
        });

        function disableBoard() {
            const cells = document.querySelectorAll('td');
            cells.forEach(cell => {
                cell.style.cursor = 'default';
                cell.removeEventListener('click', handleClick);
            });
        }
    </script>
</body>

</html>